<!-- 页面  -->
<template>
  <s-layout title="推广商品" :bgStyle="{color: '#f0eff4'}" :onShareAppMessage="state.shareInfo">
    <view class="goods-item ss-m-20" v-for="item in state.data" :key="item.id">
      <view class="head-box">
				<view class="title">
					{{ item.title }}
				</view>
				<view class="btn" @tap="onRecharge(item.id)">
					余额充值
				</view>
      </view>
			<view class="content-box">
				<image class="img" src="https://kuaidi.qidianvote.cn/static/home/3.png" mode=""></image>
				<view class="info">
					<view class="price">
						费用： <text class="num">{{ item.price }}</text>元/ <text class="unit">每年</text>
					</view>
					<view class="text">
						累积时长: {{ item.shichang }}天
					</view>
					<view class="text">
						{{ item.jianjie }}
					</view>
				</view>
			</view>
    </view>
    <s-empty
      v-if="state.total === 0"
      icon="/static/goods-empty.png"
      text="暂无推广商品"
    ></s-empty>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import $share from '@/sheep/platform/share';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import { computed, reactive } from 'vue';
  import _ from 'lodash';

  const state = reactive({
    data: [],
		total: 0,
    shareInfo: {},
  });

  async function getGoodsList() {
    let res = await sheep.$api.commission.daililst();
    if (res.code === 1) {
      state.data = res.data
			state.total = res.data.length
    }
  }
	
	async function onRecharge(id) {
		const res = await sheep.$api.commission.postdaili(id);
		if (res.code === 1) {
			sheep.$router.redirect('/pages/pay/index', {
				orderSN: res.data.order_sn,
			});
		}
	}

  onLoad(async () => {
    getGoodsList();
  });
</script>

<style lang="scss" scoped>
  .goods-item {
    background-color: #fff;
		border-radius: 10rpx;
		.head-box {
			height: 86rpx;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #eee;
			.title {
				font-size: 32rpx;
				color: #000000;
			}
			.btn {
				width: 180rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 60rpx;
				font-size: 28rpx;
				color: #fff;
				background-color: #d5a26b;
			}
		}
		.content-box {
			padding: 16rpx 0 50rpx;
			display: flex;
			align-items: center;
			.img {
				width: 92rpx;
				height: 92rpx;
				margin: 10rpx 60rpx 0;
			}
			.price {
				color: #000000;
				.num {
					color: #e97c33;
					font-size: 28rpx;
				}
				.unit {
					color: #0f8509;
					font-size: 30rpx;
					font-weight: 600;
				}
			}
			.text {
				font-size: 28rpx;
				color: #e97c33;
				line-height: 42rpx;
			}
		}
  }
</style>
